<html lang="en"><head>
    <meta charset="UTF-8">


    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

    <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111">




    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>


    <title>No SVG, no image, CSS-only fluid slider with input[type=range]</title>

    <link rel="canonical" href="https://codepen.io/thebabydino/pen/qByGqOm">




    <style>
        body {
            line-height: 1.6;
            color: #fff;
            background: #000;
            font-size: 18px;
            font-weight: 400;
            font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            &.stop {
                overflow: hidden;
            }
        }

        #page {
            position: relative;
            transition: 1s all ease-in-out;

            &.menuopen {
                opacity: .6;
                filter: blur(20px);
                transform: scale(1.2);
            }
        }

        section {
            display: flex;
            min-height: 100vh;
            padding: 50px;
            justify-content: center;
            align-items: center;
            background: #222;
            color: #fff;
            position: relative;

            &:after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                background: #000;
                opacity: .5;
                height: 100%;
                width: 100%;
            }

            h1 {
                font-size: 120px;
                margin: 0;
                z-index: 2;
                position: relative;
            }
        }

        header {
            z-index: 99999;
            position: relative;

            #logo {
                position: fixed;
                top: 30px;
                left: 0;
                right: 0;
                width: 100px;
                height: auto;
                margin: 0 auto;
                opacity: 1;
                transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;
            }

            nav {
                display: flex;
                height: 100px;
                justify-content: center;
                align-items: center;
                padding: 0 20px;
                position: fixed;
                left: 0;
                right: 0;
                width: 500px;
                margin: 0 auto;
                top: 120px;
                background-color: rgba(255,255,255,.05);
                border-radius: 200px;
                z-index: 9;
                backdrop-filter: blur(5px);
                border: 1px solid rgba(255,255,255,.06);
                transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) .2s;


                a {
                    color: #fff;
                    text-decoration: none;
                    font-weight: 700;
                    display: block;
                    padding: 10px 20px;
                    line-height: 1;
                    font-size: 15px;
                    letter-spacing: 2px;
                    text-transform: lowercase;
                    transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;

                }

                button {
                    -webkit-appearance: none;
                    background: rgba(0,0,0,.3);
                    backdrop-filter: blur(5px);
                    border: 1px solid rgba(255,255,255,.1);
                    position: absolute;
                    z-index: 99;
                    left: 0;
                    margin: auto;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    width: 60px;
                    height: 60px;
                    border-radius: 100%;
                    outline: 0;
                    border: 0;
                    cursor: pointer;
                    transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
                    transform: scale(0);

                    span {
                        width: 40%;
                        background: #fff;
                        height: 2px;
                        display: block;
                        margin: 5px auto;
                        transform: scalex(0);
                        transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0s, .3s margin ease-in 0s;
                    }

                    &:hover {
                        border-color: rgba(255,255,255,.5);

                        span {
                            margin: 10px auto;
                        }
                    }
                }
            }
        }

        header.sticky {
            #logo {
                top: 0;
                transform: scale(.8);
                opacity: 0;
                transition-delay: 0.5s;
            }
            nav {
                top: 20px;
                padding: 0;
                width: 90px;
                height: 90px;
                transition-delay: 0.5s;

                button {
                    transform: scale(1);
                    transition-delay: 0.6s;

                    span {
                        transform: scalex(1);
                        transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) .8s, .3s margin ease-in 0s;
                    }
                }

                a {
                    padding: 0;
                    opacity: 0;
                    letter-spacing: 0px;
                    transform: scale(0.3);
                    transition-delay: 0.2s;
                }
            }
        }

        #fixedlink {
            position: fixed;
            bottom: 0;
            z-index: 9999;
            right:0;
            left:0;
            text-align: center;
            text-decoration: none;
            color:#fff;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
            padding: 20px;
        }
    </style>


</head>

<body translate="no" style="--list: none;">
<header id="myHeader" class="">
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 714.6 401.1">
        <path fill="#fff" fill-rule="evenodd" d="M502.8 0h211.8l-23 39.7-138.5 240L483 401H342.7L413 279.6 251.4 0h140.3L483 158.1 538.6 62 502.8 0Zm-201 279.6L140.1 0H0l231.7 401 70-121.4Z"/>
    </svg>
    <nav>
        <a href="#vision">Vision</a>
        <a href="#knowledge">Knowledge</a>
        <a href="#space">Space</a>
        <a href="#future">Future</a>
        <button id="openmenu">
            <span></span>
            <span></span>
        </button>
    </nav>
</header>
<div id="page" class="">
    <section id="vision" style="background-image:url(https://assets.codepen.io/214624/vision.jpg)">
        <h1>Vision.</h1>
    </section>
    <section id="knowledge" style="background-image:url(https://assets.codepen.io/214624/knowledge.jpg)">
        <h1>Knowledge.</h1>
    </section>
    <section id="space" style="background-image:url(https://assets.codepen.io/214624/space.jpg)">
        <h1>Space.</h1>
    </section>
    <section id="future" style="background-image:url(https://assets.codepen.io/214624/future.jpg)">
        <h1>Future.</h1>
    </section>
</div>
<a id="fixedlink" target="_blank" rel="nofollow noopener" href="https://wyld.studio/">» See this solution in real usage</a>

</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var header = document.getElementById('myHeader');
        var page = document.getElementById('page');
        var openMenuButton = document.getElementById('openmenu');

        window.addEventListener('scroll', function() {
            page.classList.remove('menuopen');
            if (window.scrollY >= 100) {
                header.classList.add('sticky');
            } else {
                header.classList.remove('sticky');
            }
        });

        // Event listener to remove the sticky class when the button is clicked
        openMenuButton.addEventListener('click', function() {
            header.classList.remove('sticky');
            page.classList.add('menuopen');
        });

        var links = document.querySelectorAll('a[href^="#"]');

        links.forEach(function(link) {
            link.addEventListener('click', function(event) {
                // Prevent the default action
                event.preventDefault();

                // Get the target element
                var targetId = this.getAttribute('href');
                var targetElement = document.querySelector(targetId);

                // Smooth scroll to target
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    });

</script>
</html>